<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <jsp:include page="../fragments/head.jsp"></jsp:include>
  <jsp:include page="../fragments/criminalsoulsapi_support.jsp"></jsp:include>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript">
    MapScene = Class.create({
      initialize: function (mapControl, scene) {
  	    this._mapControl = mapControl;
  	    this._scene = scene;
  	    
    	  this._marker = new google.maps.Marker({
          position: new google.maps.LatLng(scene.lat, scene.lng), 
          map: this._mapControl.getMap(), 
          title: scene.name,
          icon: 'http://maps.google.com/mapfiles/marker_white.png'
        });
    	
        this._loadTasks();
      },
      _loadTasks: function () {
        var _this = this;
        
        getCriminalSoulsApi().apiRequest('/tasks/findTasks', { 'sceneId': this._scene.id }, 
        	function (response) {
            var generalTaskLevels = response.responseJSON.generalTaskLevels;
            var customTasks = response.responseJSON.customTasks;
            
            var hasGeneralTaskLevels = generalTaskLevels.length > 0;
            var hasCustomTasks = customTasks.length > 0;
            var iconUrl = "";
            
            switch (true) {
              case hasGeneralTaskLevels && hasCustomTasks:
                iconUrl = "http://maps.google.com/mapfiles/marker_green.png";
              break;
              case hasGeneralTaskLevels && !hasCustomTasks:
                iconUrl = "http://maps.google.com/mapfiles/marker_yellow.png";
              break;
              case !hasGeneralTaskLevels && hasCustomTasks:
                iconUrl = "http://maps.google.com/mapfiles/marker_orange.png";
              break;
              default:
                iconUrl = "http://maps.google.com/mapfiles/marker_grey.png";
              break;
            }
            
            _this._marker.setIcon(iconUrl);
          }
        );
      }
    });
  
    MapControl = Class.create({
      initialize: function (container) {
        this._map = new google.maps.Map(container, {
    	    zoom: 12,
    	    mapTypeId: google.maps.MapTypeId.ROADMAP
    	  });	  
        
        this._guessLocation();
        this._scenes = new Hash();
        this._loadQueue = new Array();
        this._loadingScenes = false;
        
        this._mapCenterChangedListener = this._onMapCenterChanged.bindAsEventListener(this);

        google.maps.event.addListener(this._map, 'center_changed', this._mapCenterChangedListener);
      },
      getMap: function() {
        return this._map;
      },
      _guessLocation: function () {
   	    if (navigator.geolocation) {
   	      var _this = this;
   		    navigator.geolocation.getCurrentPosition(function(position) {
   		      _this._setMapCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
   		    }, function() {
   			    _this._setMapCenter(new google.maps.LatLng(40.69847032728747, -73.9514422416687));
   		    });
   		  } else {
   		    this._setMapCenter(new google.maps.LatLng(40.69847032728747, -73.9514422416687));
   		  }
      },
      _setMapCenter: function(ll) {
    	  this._map.setCenter(ll);
      },
      _onMapCenterChanged: function (event) {
        var center = this._map.getCenter();
		    this._loadScenes(center.lat(), center.lng());
      },
      _loadScenes: function (lat, lng) {
    	  this._addQueuedLoad(lat, lng);
    	  if (this._loadingScenes == false) {
    		  this._nextFromQueuedLoad();
    	  }
      },
      _hasScene: function (sceneId) {
        return this._scenes.get(sceneId) != undefined;
      },
      _addScene: function (sceneId, sceneObject) {
        this._scenes.set(sceneId, sceneObject);
      },
      _addQueuedLoad: function (lat, lng) {
    	  for (var i = 0, l = this._loadQueue.length; i < l; i++) {
    		  if ((this._loadQueue[i].lat == lat) && (this._loadQueue[i].lng == lng)) {
    			  return;
    		  }
    	  }
    	  
    	  this._loadQueue.push({
    		  lat: lat,
    		  lng: lng
    	  });
      },
      _nextFromQueuedLoad: function () {
    	  if (this._loadQueue.length > 0) {
    		  this._loadingScenes = true;
    		  var queuedLoad = this._loadQueue.pop();
          var _this = this;
	        getCriminalSoulsApi().apiRequest('/scenes/findNearbyScenes', { 'lat': queuedLoad.lat, 'lng': queuedLoad.lng }, 
    	      function (response) {
	            var scenes = response.responseJSON.scenes;
	            for (var i = 0, l = scenes.length; i < l; i++) {
	              var scene = scenes[i];
	              if (!_this._hasScene(scene.id)) {
	                _this._addScene(scene.id, new MapScene(_this, scene));
	              }
	            }
	            _this._nextFromQueuedLoad();
	          }
    	    );
        } else {
        	this._loadingScenes = false;
        }
      }
    });
  
    function initialize() {
	  new MapControl($("tasksOnMapCanvas"));
	}
</script>

</head>
<body onload="initialize();">
  <jsp:include page="../fragments/header.jsp"></jsp:include>
  
  <h1> Tasks On Map</h1>
  
  <div id="tasksOnMapCanvas"></div>
  
  <jsp:include page="../fragments/footer.jsp"></jsp:include>
</body>
</html>